/* #region AYARLAR */
:root {
	--border-radius: 50%;
	--border-radius-corner: 1rem;
	--duration-hover: 0.25s;
	--duration-animation: 1.5s;
	--duration-kutu-bilgi: 5s;
	--background-transparency: 0.5;
	--background-transparency-percent: 40%;
	--color-background: #ECEEF4;
	--color-background-secondary: #D0D7E6;
	--color-background-basarili: #CFFFBF;
	--color-background-hata: #FFBFBF;
	--color-primary: #0B3E78;
	--color-secondary: #50a3e2;
	--color-highlight: #25AF82;
	--color-basarili: #238C00;
	--color-hata: #8C0000;
	--color-whatsapp: #0CC437;
	--gap: 0.75rem;
	--gorunen-yukseklik: 100dvh; 
	--ust-bosluk: 0px;
}
/* #endregion */

/* #region TARAYICI LİMİTLEME */
:root { /* Tarayıcıların karanlık tema müdahalelerini sıfırlar. */
	color-scheme: light only;
}

*, *::before, *::after { /* Farklı tarayıcıların varsayılan boşluklarını sıfırlar. */
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html { /* Font Boosting engeller. */
	text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
	-moz-text-size-adjust: 100%;
}

html, body { /* Scrollbar'ı kaldırır ve sayfanın kaymasını engeller. */
	width: 100%;
	scrollbar-width: none;
	overflow-x: hidden;
	-ms-overflow-style: none;
}

body { /* Tarayıcıların karanlık tema müdahalelerini sıfırlar. */
	forced-color-adjust: none;
	-webkit-forced-color-adjust: none;
}

::-webkit-scrollbar { /* Scrollbar'ı kaldırır. (IOS Safari, Chrome, Edge ve tüm WebKit tarayıcılar.) */
	width: 0;
	height: 0;
	display: none;
}

img, picture, video, canvas, svg { /* Medya elemanlarının taşmasını önler. */
	max-width: 100%;
	display: block;
}

h1, h2, h3, h4, h5, h6, span, a, input, button, textarea, select { /* Yazı elemanlarında sistem fontlarını ezer. */
	font: inherit;
	font-weight: bold;
	text-decoration: none;
	color: var(--color-primary);
}
/* #endregion */

/* #region ALTYAPI */
.content-horizontal-left { /* İçeriği yatay dizer ve sola hizalar. */
	display: flex;
	justify-content: flex-start;
	align-items: center;
	text-align: left;
}

.content-horizontal-between { /* İçeriği yatay dizer ve kenarlara hizalar. */
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.content-horizontal-center { /* İçeriği yatay dizer ve ortaya hizalar */
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
}

.content-horizontal-right { /* İçeriği yatay dizer ve sağa hizalar */
	display: flex;
	justify-content: flex-end;
	align-items: center;
	text-align: right;
}

.content-horizontal-evenly { /* İçeriği yatay dizer ve boşluğu kenarlara ve aralara eşit dağıtır. */
	display: flex;
	justify-content: space-evenly;
	align-items: center;
}
		
.content-vertical-start { /* İçeriği dikey dizer ve üste hizalar. */
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}

.content-vertical-between { /* İçeriği dikey dizer ve kenarlara hizalar. */
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.content-vertical-middle { /* İçeriği dikey dizer ve ortaya hizalar */
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.content-vertical-end { /* İçeriği dikey dizer ve alta hizalar */
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}

.content-vertical-evenly { /* İçeriği dikey dizer ve boşluğu kenarlara ve aralara eşit dağıtır. */
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
}

.content-align-horizontal-center { /* İçeriği dizilime dokunmadan yatayda ortaya hizalar. */
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.content-align-horizontal-right { /* İçeriği dizilime dokunmadan yatayda sağa hizalar. */
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	text-align: right;
}

.content-align-vertical-middle { /* İçeriği dizilime dokunmadan dikeyde ortaya hizalar. */
	display: flex;
	align-items: center;
}

.content-align-vertical-end { /* İçeriği dizilime dokunmadan dikeyde alta hizalar. */
	display: flex;
	align-items: flex-end;
}

.self-auto { /* DEFAULT: Kapsayıcısının varsayılan hizalamasını uygular. */
	align-self: auto;
}

.self-start { /* Kendisini sola veya üste hizalar. */
	align-self: flex-start;
}

.self-center { /* Kendisini yatayda veya dikeyde ortaya hizalar. */
	align-self: center;
}

.self-right-end { /* Kendisini yatayda sağa veya dikeyde alta hizalar. */
	align-self: flex-end;
}

.self-stretch { /* Kendisini kapsayıcı genişliği veya yüksekliği boyunca esnetir. */
	align-self: stretch;
}

.self-baseline { /* Kendisini metin taban çizgisine göre hizalar. */
	align-self: baseline;
}

.fixed-top-left {
	left: 1rem;
	top: 1rem;
	position: fixed;
}

.fixed-top-center {
	left: 50%;
	top: 1rem;
	position: fixed;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
}

.fixed-top-right {
	right: 1rem;
	top: 1rem;
	position: fixed;
}

.fixed-bottom-left {
	left: 1rem;
	bottom: 1rem;
	position: fixed;
}

.fixed-bottom-center {
	left: 50%;
	bottom: 1rem;
	position: fixed;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
}

.fixed-bottom-right {
	right: 1rem;
	bottom: 1rem;
	position: fixed;
}

.row {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
}

[class*="col-"] {
	width: 100%;
	flex: 0 0 100%;
	max-width: 100%;
}

.col-md-1  { flex: 0 0 8.333333%; max-width: 8.333333%; }
.col-md-2  { flex: 0 0 16.666667%; max-width: 16.666667%; }
.col-md-3  { flex: 0 0 25%; max-width: 25%; }
.col-md-4  { flex: 0 0 33.333333%; max-width: 33.333333%; }
.col-md-5  { flex: 0 0 41.666667%; max-width: 41.666667%; }
.col-md-6  { flex: 0 0 50%; max-width: 50%; }
.col-md-7  { flex: 0 0 58.333333%; max-width: 58.333333%; }
.col-md-8  { flex: 0 0 66.666667%; max-width: 66.666667%; }
.col-md-9  { flex: 0 0 75%; max-width: 75%; }
.col-md-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
.col-md-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
.col-md-12 { flex: 0 0 100%; max-width: 100%; }

.container {
	width: 100%;
	height: 100vh;
	overflow-y: auto;
}

.hide {
	display: none;
}
/* #endregion */

/* #region TEMEL */
@font-face {
	font-family: 'Century Gothic';
	src: url('Font/GOTHIC.woff2') format('woff2');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Century Gothic';
	src: url('Font/GOTHICB.woff2') format('woff2');
	font-weight: bold;
	font-style: normal;
}

@font-face {
	font-family: 'Century Gothic';
	src: url('Font/GOTHICBI.woff2') format('woff2');
	font-weight: bold;
	font-style: italic;
}

@font-face {
	font-family: 'Century Gothic';
	src: url('Font/GOTHICI.woff2') format('woff2');
	font-weight: normal;
	font-style: italic;
}

body {
	background-color: var(--color-background) !important;
	font-family: "Century Gothic" !important;
	font-weight: bold;
}

.background-title {
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	padding: 0 var(--gap);
	position: absolute;
	background-color: rgb(from var(--color-background) r g b / var(--background-transparency-percent));
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
	box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
}

.background-card {
	background-color: rgb(from var(--color-background) r g b / var(--background-transparency-percent));
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
	box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
}

h1, h2, h3, h4, h5, h6 {
	margin-bottom: var(--gap);
}

h1 {
	font-size: 2.5rem;
}

h2 {
	font-size: 2.25rem;
}

h3 {
	font-size: 2rem;
}

h4 {
	font-size: 1.75rem;
}

h5 {
	font-size: 1.5rem;
}

h6 {
	font-size: 1.25rem;
}

span {
	font-size: 1rem;
	line-height: 1rem;
}

.text-container {
	width: 100%;
	padding: 0 var(--gap);
	text-align: center;
}

.text-headline {
	color: var(--color-text-headline);
}

.text-highlight {
	color: var(--color-highlight);
}

.text-gradient {
	background: linear-gradient(to right, var(--color-primary), var(--color-secondary));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.text-quote {
	all: unset;
	font-size: 2rem;
}

button {
	display: flex;
	align-items: center;
	background-color: var(--color-primary);
	color: var(--color-background);
	border: none;
	outline: none;
	cursor: pointer;
	box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
	transition: all var(--duration-hover) linear;
	-webkit-transition: all var(--duration-hover) linear;
}

button:hover {
	background-color: var(--color-background);
	color: var(--color-primary);
	box-shadow: rgba(0, 0, 0, 0.6) 0px 0px 6px 1px inset;
}

button[type="submit"] {
	padding: 0.5rem;
	border: 0.125rem solid var(--color-primary);
	border-radius: calc(var(--border-radius-corner) / 2);
}

button i {
	margin-right: calc(var(--gap) / 2);
}

.button-secondary {
	background-color: var(--color-secondary);
	color: var(--color-primary);
}

.button-circle {
	height: var(--height);
	aspect-ratio: 1 / 1;
	justify-content: center;
	font-size: var(--font-size);
	color: var(--icon-color, var(--color-background));
	background-color: var(--color-primary);
	border-radius: var(--border-radius);
	transition: all var(--duration-hover) linear;
	-webkit-transition: all var(--duration-hover) linear;
}

.button-circle i {
	margin: 0;
}

.button-circle-center {
	top: 50%;
	left: 50%;
	position: absolute;
	transform: translate(-50%, -50%);
	z-index: 1;
}

.button-circle-signal {
	height: 100%;
	aspect-ratio: 1 / 1;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
	transition: all var(--duration-hover) linear;
	-webkit-transition: all var(--duration-hover) linear;
}

.button-circle-signal::before {
	content: "";
	height: 100%;
	aspect-ratio: 1 / 1;
	top: 50%;
	left: 50%;
	position: absolute;
	border-radius: var(--border-radius);
	background-color: var(--signal-bg, var(--color-background));
	z-index: -1;
	animation: animation-signal 1s cubic-bezier(1, 1, 1, 1.000) infinite backwards;
}

.footer {
	padding: 1rem;
	background-color: var(--color-primary);
}

.footer a {
	color: var(--color-secondary);
	transition: all var(--duration-hover) linear;
	-webkit-transition: all var(--duration-hover) linear;
}

.footer a:hover {
	color: var(--color-background);
}
/* #endregion */

/* #region KENAR MENÜ */
.kenar-menu {
	width: 20rem;
	height: calc(100vh - 3.5rem);
	top: 3.5rem;
	margin-left: -20rem;
	display: flex;
	flex-direction: column;
	flex-shrink: 0;
	position: fixed;
	z-index: 2;
	transition: all var(--duration-hover) linear;
	-webkit-transition: all var(--duration-hover) linear;
}

.kenar-menu.open {
	margin-left: 0;
}

.kenar-menu ul {
	min-height: 0;
	flex: 1;
	overflow-y: auto;
}

.kenar-menu ul li {
	background-color: var(--color-primary);
	color: var(--color-background);
	box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
	transition: all var(--duration-hover) linear;
	-webkit-transition: all var(--duration-hover) linear;
}

.kenar-menu .li-ozel {
	background-color: var(--color-secondary);
	color: var(--color-primary);
}

.kenar-menu ul li:hover {
	background-color: var(--color-background);
	color: var(--color-primary);
	box-shadow: rgba(0, 0, 0, 0.6) 0px 0px 6px 1px inset;
}

.kenar-menu ul li a {
	padding: var(--gap);
	display: flex;
	align-items: center;
	color: inherit;
	transition: all var(--duration-hover) linear;
	-webkit-transition: all var(--duration-hover) linear;
}

.kenar-menu ul li a:hover {
	color: var(--color-mavi-4);
}

.kenar-menu ul li a i {
	margin-right: calc(var(--gap) / 2);
}
/* #endregion */

/* #region HEADER */
.header {
	width: 100%;
	height: 3.5rem;
	top: 0;
	padding: calc(var(--gap) / 2);
	position: sticky;
	z-index: 2;
}

.header-logo {
	height: 100%;
	transition: all var(--duration-hover) linear;
	-webkit-transition: all var(--duration-hover) linear;
}

.header-logo:hover {
	opacity: 0.6;
}

.header-logo img {
	height: 100%;
}
/* #endregion */

/* #region ÖZEL */
.canli-danisma-menu {
	width: 25rem;
	height: 100dvh;
	top: var(--ust-bosluk);
	right: 0;
	padding-bottom: calc((100dvh - var(--gorunen-yukseklik)) + env(safe-area-inset-bottom));
	margin-right: -20rem;
	display: flex;
	flex-direction: column;
	flex-shrink: 0;
	position: fixed;
	background-color: var(--color-background);
	z-index: 3;
	transition: all var(--duration-hover) linear;
	-webkit-transition: all var(--duration-hover) linear;
}

.canli-danisma-menu.open {
	margin-right: 0;
}

.canli-danisma-mesajlar {
	min-height: 0;
	flex: 1 1 auto;
	padding-top: var(--gap);
	gap: var(--gap);
	position: relative;
	overflow-y: auto;
	scrollbar-width: thin;
}

.canli-danisma-alt {
	left: 50%;
	bottom: calc(100% + var(--gap));
	position: absolute;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateX(-50%);
	box-shadow: 0 0.25rem 0.75rem rgba(11, 62, 120, 0.18);
}

.canli-danisma-alt.is-visible {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.canli-danisma-alt.is-visible:hover {
	opacity: 0.6;
}

.canli-danisma-mesaj-kutu {
	width: 100%;
	padding: var(--gap);
	padding-right: calc(var(--gap) + var(--button-width));
	resize: none;
	border: 0.125rem solid var(--color-primary);
	border-radius: var(--border-radius-corner);
}

.canli-danisma-mesaj-kutu:focus {
	outline: none;
}

.canli-danisma-mesaj-gelen > div,
.canli-danisma-mesaj-giden > div {
	padding: calc(var(--gap) / 2) var(--gap);
	margin-top: calc(var(--gap) / 2);
	font-weight: bold;
	color: var(--color-background);
}

.canli-danisma-mesaj-gelen > div {
	margin-right: calc(var(--gap) * 8);
	background-color: var(--color-secondary);
	border-radius: 0 var(--border-radius-corner) var(--border-radius-corner) 0;
}

.canli-danisma-mesaj-giden > div {
	margin-left: calc(var(--gap) * 8);
	background-color: var(--color-primary);
	border-radius: var(--border-radius-corner) 0 0 var(--border-radius-corner);
}

.canli-danisma-mesaj-gelen span {
	margin-left: calc(var(--gap) / 2);
}

.canli-danisma-mesaj-giden span {
	margin-right: calc(var(--gap) / 2);
}

.banner-container {
	width: 100%;
	max-width: 1280px;
	aspect-ratio: 16 / var(--vertical-ratio, 9);
	margin: 0 auto;
	position: relative;
	overflow: hidden;
	background: linear-gradient(to right, var(--color-background) 0%, var(--color-background) 25%, transparent 50%), url('Gorsel/Banner.jpg');
	background-size: cover;
	background-position: center;
}

.banner-container img {
	width: 100%;
	height: 100%;
	object-position: center var(--img-y, 50%);
	object-fit: cover;
}

.social-container {
	height: 100%;
	top: 0;
	right: calc(var(--gap) / 1.25);
	gap: calc(var(--gap) / 4);
	align-items: flex-end;
	position: absolute;
}

.video {
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	position: absolute;
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
}

.video-iframe {
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	position: absolute;
	border: 0;
}

.card-container {
	width: 100%;
	padding: var(--gap);
	gap: var(--gap);
	display: grid;
	grid-template-columns: minmax(0, 1fr);
}

.card {
	padding: var(--gap);
	border-radius: var(--border-radius-corner);
}

.card i {
	height: var(--height);
	aspect-ratio: 1 / 1;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: var(--border-radius);
	background-color: var(--color-background-secondary);
	color: var(--icon-color, var(--color-primary));
	font-size: var(--font-size);
}

.logos-container {
	width: 100%;
	padding: var(--gap);
	gap: var(--gap);
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 53rem) {
	.logos-container {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.logos-logo {
	width: 100%;
	height: auto;
	padding: var(--gap);
	border-radius: var(--border-radius-corner);
	background-color: rgb(from var(--color-background-secondary) r g b / var(--background-transparency-percent));
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
	box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
}

.statistics-container {
	width: 100%;
	padding: var(--gap);
	gap: var(--gap);
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-auto-rows: auto;
	align-items: start;
}

.comments-rate i.fa-regular {
	color: var(--color-primary);
}

.comments-rate i:not(.fa-regular) {
	color: var(--color-secondary);
}

.comments-pagination {
	margin-top: var(--gap);
	gap: calc(var(--gap) / 2);
	color: var(--color-primary);
	transition: all var(--duration-hover) linear;
	-webkit-transition: all var(--duration-hover) linear;
}

.comments-pagination i:hover {
	color: var(--color-background-secondary);
}

.contact i {
	height: 1.5rem;
	aspect-ratio: 1 / 1;
	margin-right: calc(var(--gap) / 2);
	display: flex;
	justify-content: center;
	color: var(--color-background);
	font-size: 1.25rem;
}
/* #endregion */

/* #region ANİMASYON */
.animation-slide-up.is-visible {
	animation: animation-slide-up var(--duration-animation) cubic-bezier(0.15, 0.8, 0.5, 1) both;
}

.animation-slide-left.is-visible {
	animation: animation-slide-left var(--duration-animation) cubic-bezier(0.15, 0.8, 0.5, 1) both;
}

.animation-slide-right.is-visible {
	animation: animation-slide-right var(--duration-animation) cubic-bezier(0.15, 0.8, 0.5, 1) both;
}

.animation-scale.is-visible {
	animation: animation-scale var(--duration-animation) cubic-bezier(0.15, 0.8, 0.5, 1) both;
}

@keyframes animation-slide-up {
	0% {
		transform: translateY(20rem);
	}
	100% {
		transform: translateY(0);
	}
}

@keyframes animation-slide-left {
	0% {
		transform: translateX(-100%);
	}
	100% {
		transform: translateX(0);
	}
}

@keyframes animation-slide-right {
	0% {
		transform: translateX(30rem);
	}
	100% {
		transform: translateX(0);
	}
}

@keyframes animation-scale {
	0% {
		scale: 0.5;
	}
	100% {
		scale: 1;
	}
}

@keyframes animation-flip {
	0% {
		transform: translateY(-50%) perspective(400px) rotateY(90deg);
	}
	100% {
		transform: translateY(-50%) perspective(400px) rotateY(0deg);
	}
}

@keyframes animation-signal {
	0% {
		opacity: 1;
		transform: translate(-50%, -50%) scale(1);
	}
	100% {
		opacity: 0;
		transform: translate(-50%, -50%) scale(1.4);
	}
}
/* #endregion */

/* #region RESPONSIVE */
.mobile-visible {
	visibility: hidden;
}

.no-scroll {
	overflow: hidden !important;
}

@media (max-width: 640px) {
	.mobile-visible {
		visibility: visible;
	}

	.kenar-menu {
		width: 100%;
		margin-left: -100%;
		position: fixed;
	}

	.canli-danisma-menu {
		width: 100%;
		margin-right: -100%;
	}
}
/* #endregion */